<template>
  <div class="stroeBox">
    <div class="toper">
      我的储值卡
    </div>
    <div
      v-for="(item, index) in userInfo"
      :key="index"
      class="cardBox"
    >
      <img
        src="../../assets/img/card1.png"
        alt=""
        class="card"
      >
      <div class="infos">
        <div class="tips">
          储值卡余额
        </div>
        <div class="price">
          <span>{{ item.fBalance }}</span>
          <div>去充值</div>
        </div>
      </div>
      <div />
    </div>
    <div class="cardBox_tab">
      <div class="header">
        <div class="left">
          <div
            v-for="(item, index) in statuList"
            :key="item.status"
            class="title"
            :class="{ active: tabIndex == index }"
            @click="selectedIndex(item, index)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="right">
          <el-date-picker
            v-model="searchTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="small"
          />
          <div
            class="buttons"
            @click="ExportGiftCard"
          >
            搜索
          </div>
        </div>
      </div>
    </div>
    <div class="list_box">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        height="46rem"
      >
        <el-table-column
          label="交易时间"
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.ts | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="交易类型">
          <template slot-scope="scope">
            {{ scope.row.payment_desc === undefined? '': scope.row.payment_desc }}{{ scope.row.action_type_desc }}
          </template>
        </el-table-column>
        <el-table-column label="充值金额">
          <template slot-scope="scope">
            {{ scope.row.action_type === 1? ((scope.row.sum * 100) / 100).toFixed(2): '' }}
          </template>
        </el-table-column>
        <el-table-column label="消费金额">
          <template slot-scope="scope">
            {{ scope.row.action_type !== 1? ((scope.row.sum * 100) / 100).toFixed(2): '' }}
          </template>
        </el-table-column>
        <el-table-column label="储值卡余额">
          <template slot-scope="scope">
            {{ ((scope.row.balance * 100) / 100).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          label="交易详情"
          width="350"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.action_type !== 1">
              {{ `【${scope.row.action_type_desc}】` }}
              {{ scope.row.action_type === 3? "退款单号": scope.row.action_type === 2? "订单号": "" }}
              <span
                class="logcs"
                @click="GoToOrderDetail(scope.row)"
              >{{ scope.row.source1 }}</span>
            </div>
            <div v-else />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="PageTotal"
        :current-page.sync="pageIndex"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>

<script>
export default {
  name: "Storecard",
  components: {},
  filters: {
    formatDate(TimeData) {
    //时间戳是整数，否则要parseInt转换
    let date = new Date(TimeData);
    let YY = date.getFullYear() + '-';
    let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
    let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    return YY + MM + DD +" "+hh + mm + ss; 
}
  },
  data() {
    return {
      tabIndex: 0,
      userInfo: [], // 会员信息
      searchTime: [],
      tableData: [],
      TabStatus: 0,
      PageTotal: 0,
      pageIndex: 1, // 分页索引
      pageSize: 100000, // 单页数据量
      statuList: [
        // 0:UNUSED(“未使用”) 2:USED(“已使用”) 3:OBSOLETE(“已作废”)
        {
          status: 0,
          title: "全部",
          statusName: "UNUSED",
        },
        {
          status: 1,
          title: "充值",
          statusName: "USED",
        },
        {
          status: 2,
          title: "消费",
          statusName: "OBSOLETE",
        },
      ],
    };
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.getData();
    this.StorageCardGetDetailData(this.TabStatus);
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    //选择状态
    selectedIndex(item, index) {
      console.log("选择状态", item, index);
      this.tabIndex = index;
      this.TabStatus = item.status;
      this.searchTime = [];
      this.pageIndex = 1;
      this.tableData = []
      this.StorageCardGetDetailData(this.TabStatus);
    },
    // 获取会员信息
    getData() {
      let paramse = {
        token: localStorage.getItem("token"),
        data: {},
      };
      this.$api.person.StorageCardCardDetail(paramse).then((res) => {
        // 执行某些操作
        if (res.code == 200) {
          console.log("会员信息", res.data);
          this.userInfo = res.data;
        }
      });
    },
    // 获取个人中心储值卡列表
    StorageCardGetDetailData(iType) {
      let params = {
        token: localStorage.getItem("token"),
        action:'mm%2Fstorage%2Fquery%2F',
        data: {
          conditions: [
            {
              name:"mid",
              value1:JSON.parse(localStorage.getItem("userInfo")).mid,
              type:"string",
              op:"eq"
            }
          ],
          pager:{
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
            totalPage: '',
            totalCount: '',
          },
        }
      };
      this.$api.person.StorageCardGetDetail(params).then((res) => {
        console.log("获取个人中心储值卡列表", res);
        // 根据选项卡获取不同数据
        if (iType === 0) {
          console.log('全部')
          this.TimeSequence(res.data)
        } else if(iType === 1) {
          console.log('充值', iType, res.data)
          this.TabListData(iType, res.data)
        } else {
          console.log('消费', iType, res.data)
          this.TabListData(iType, res.data)
        }
      });
    },
    // 根据不同选项得出不同列表
    TabListData(iType, ListData) {
      let  newArr = ListData.filter(function (obj) {return obj.action_type== iType})
      console.log('根据不同选项得出不同列表', iType, newArr)
      this.TimeSequence(newArr)
    },
    // 根据交易时间排序
    TimeSequence(TimeSequence) {
      // 将ts时间转成时间数字进行排序
      let dateToTime = function(str){return (new Date(str.replace(/-/g,'/'))).getTime()}; //用/替换日期中的-是为了解决Safari的兼容
      for(var i=0; i < TimeSequence.length; i++){
        TimeSequence[i].ts = dateToTime(TimeSequence[i].ts);
      }
      TimeSequence.sort(function(a, b) {
        return b.ts> a.ts ? 1 : -1;
      });
      console.log('根据交易时间排序', TimeSequence)
      this.tableData = TimeSequence
    },

    // 搜索
    ExportGiftCard() {
      console.log("搜索", this.searchTime, this.tableData);
      if ( this.searchTime === null || this.searchTime.length === 0 ) {
        this.StorageCardGetDetailData(this.TabStatus);
      } else {
        let StartToEndTime = function(str){return (new Date(str.replace(/-/g,'/'))).getTime()}; //用/替换日期中的-是为了解决Safari的兼容
        for(var i=0; i < this.searchTime.length; i++){
          this.searchTime[i] = StartToEndTime(this.searchTime[i]);
        }
        let newArr = []
        this.tableData.forEach(item =>{
           if(item.ts >= this.searchTime[0] && item.ts <= this.searchTime[1]) {
             newArr.push(item)
           }
        })
        console.log('newArr',newArr)
        this.tableData = newArr
      }
      // // this.StorageCardGetDetailData(ExportGiftCard, this.TabStatus);
    },
    handleCurrentChange(val) {
      console.log("分页获取当前页", val);
      this.pageIndex = val;
      this.StorageCardGetDetailData(this.searchTime, this.TabStatus);
    },
    // 去详情
    GoToOrderDetail(GoToOrderDetail) {
      console.log("去详情", GoToOrderDetail);
      let cOrderNo = "";
      if (GoToOrderDetail.action_type === 3) {
        cOrderNo = GoToOrderDetail.source2;
      } else {
        cOrderNo = GoToOrderDetail.source1;
      }
      this.$router.push({
        path: "/person/orderDetail",
        query: {
          cOrderNo: cOrderNo,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.stroeBox {
  .toper {
    padding: 2.81rem 2.44rem;
    font-size: 1.13rem;
    // color: #F0406F;
    background-color: #fff;
    margin-bottom: 0.45rem;
  }
  .cardBox {
    padding: 2.88rem 2.44rem 2.06rem;
    border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    .card {
      width: 25.75rem;
      height: 14.88rem;
      margin-right: 1.44rem;
    }
    .infos {
      display: flex;
      flex-direction: column;
      .tips {
        font-size: 0.88rem;
        color: #333;
        padding-bottom: 2.38rem;
      }
      .price {
        display: flex;
        flex-direction: row;
        align-items: center;
        span {
          padding-right: 1.06rem;
          font-size: 1.5rem;
          color: #f0406f;
        }
        div {
          width: 4.88rem;
          height: 2.19rem;
          text-align: center;
          line-height: 2.19rem;
          background: rgba(240, 64, 111, 1);
          border: 0px solid rgba(240, 64, 111, 1);
          border-radius: 0.31rem;
          font-size: 0.88rem;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .cardBox_tab {
    background-color: #fff;
    padding: 1.75rem 2.62rem;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.06rem solid rgba(216, 216, 216, 1);
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .title {
          cursor: pointer;
          font-size: 1.13rem;
          padding: 0.63rem .94rem;
          position: relative;
          &.active {
            color: #f0406f;
            position: relative;
            padding: 0.63rem 0.94rem;
            border-bottom: 0.31rem solid rgba(240, 64, 111, 1);
          }
        }
      }
      .right {
        display: flex;
        .buttons {
          margin-left: 1rem;
          font-size: 0.8rem;
          border: 1px solid rgba(216, 216, 216, 1);
          border-radius: 10px;
          color: #666;
          padding: 0.5rem 1rem;
          cursor: pointer;
        }
      }
    }
  }
  .list_box {
    background: #fff;
    padding: 0 2.62rem;
    height: 48rem;
    .logcs {
      cursor: pointer;
    }
    .logcs:hover {
      color: #f0406f;
    }
  }
  .pagination_box {
    padding: 0 2.62rem;
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }
}
</style>
<style>
.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}
.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
</style>